<template>
  <!-- 加载状态 -->
  <el-skeleton v-if="loading" :rows="6" animated/>

  <!-- 错误提示 -->
  <el-alert
      v-else-if="error"
      title="数据加载失败"
      type="error"
      :description="errorMessage"
      show-icon
      closable
  />

  <!-- 内容展示 -->
  <div v-else class="news-container">
    <h1 class="news-title">{{ newsData.title }}</h1>  <!-- 改为h1标题 -->

    <div class="meta-info">
      <div class="time">
        <el-icon>
          <Clock/>
        </el-icon>
        <span class="time-text">{{ newsData.publishTime }}</span>
      </div>
      <div class="views">
        <el-icon>
          <View/>
        </el-icon>
        <span class="views-text">浏览：{{ newsData.viewCount }}</span> <!-- 字段修正 -->
      </div>
    </div>

    <el-divider class="custom-divider"/> <!-- 添加自定义分割线 -->

    <div class="content-container"> <!-- 新增内容容器 -->
      <div
          class="content markdown-body"
          v-html="processedContent"
      ></div>
    </div>

    <div class="comment-section">
      <h2>评论区{{state.comments.length}}条</h2>
      <!-- 评论列表 -->
      <ul class="comment-list">
        <li v-for="comment in state.comments" :key="comment.id" class="comment-item">
          <div class="comment-header">
            <el-avatar :size="30" :src="comment.avatar" />
            <div class="user-info">
              <span class="username">{{ comment.name }}</span>
              <span class="time">{{ formatTime(comment.createTime) }}</span>
            </div>
          </div>
          <p class="comment-content">{{ comment.content }}</p>

          <div class="reply-section">
            <el-button
                size="small"
                @click="toggleReply(comment)"
                class="reply-btn"
            >
              {{ comment.showReply ? '取消回复' : '回复' }}
            </el-button>

            <!-- 回复表单 -->
            <div v-if="comment.showReply" class="reply-form">
              <el-input
                  v-model="state.replyContent"
                  placeholder="写下你的回复..."
                  type="textarea"
                  :rows="2"
              />
              <el-button
                  type="primary"
                  size="small"
                  @click="submitReply(comment)"
                  class="submit-btn"
              >
                提交回复
              </el-button>
            </div>

            <!-- 回复列表 -->
            <ul
                v-if="comment.childCommentList?.length"
                class="reply-list"
            >
              <li
                  v-for="reply in comment.childCommentList"
                  :key="reply.id"
                  class="reply-item"
              >
                <div class="comment-header">
                  <el-avatar :size="30" :src="reply.avatar" />
                  <div class="user-info">
                    <span class="username">{{ reply.name }}</span>
                    <span class="time">{{ formatTime(reply.createTime) }}</span>
                  </div>
                </div >
                <p class="comment-content">{{ reply.content }}</p>
              </li>
            </ul>
          </div>
        </li>
      </ul>

      <!-- 新评论表单 -->
      <div class="new-comment">
        <h3>发表评论</h3>
        <el-input
            v-model="state.newComment"
            placeholder="写下你的评论..."
            type="textarea"
            :rows="4"
        />
        <el-button
            type="primary"
            @click="submitComment"
            class="submit-btn"
        >
          提交评论
        </el-button>
      </div>
    </div>
  </div>

  <div class="footer">
    <div>社区养老服务整合平台</div>

  </div>

</template>


<script setup>
import { ElMessage } from 'element-plus';
import {ref, onMounted, computed,reactive} from 'vue'
import {useRoute} from 'vue-router'
import {marked} from 'marked'
import {View, Clock} from '@element-plus/icons-vue';
import DOMPurify from 'dompurify'
import {getClientInfoNewsById} from "../../service/infoNewsApi.js";
import { ClientlistcommentInfo,ClientAddComment ,ClientReplyComment} from '../../service/commentinfoApi.js'

const route = useRoute()
const newsData = ref({
  id: '',
  title: '',
  content: '',
  publishTime: '',
  viewCount: 0
})

const state = reactive ({
  comments:[],
  newComment: '',
  replyContent: '',
  showReply: false
})

const loading = ref(true)
const error = ref(false)
const errorMessage = ref('')


// 获取新闻详情
const fetchNewsData = async () => {
  try {
    const infoNews = await getClientInfoNewsById(route.params.id)
    newsData.value = infoNews.data;
  } catch (err) {
    error.value = true
    errorMessage.value = err.response?.data?.message || '网络连接异常'
  } finally {
    loading.value = false
  }
}

// Markdown 安全处理管道
const processedContent = computed(() => {
  const rawHtml = marked.parse(newsData.value.content)
  return DOMPurify.sanitize(rawHtml)
})
//获取评论
const formatTime = (timeStr) => {
  return new Date(timeStr).toLocaleString();
};
const getComments = async () => {
  const result = await ClientlistcommentInfo(route.params.id);
  state.comments =result.data
};

onMounted(() => {
  if (!route.params.id) {
    error.value = true
    errorMessage.value = '缺少新闻ID参数'
    loading.value = false
    return
  }
  fetchNewsData()
  getComments()
})


const submitComment = async () => {
  if (!state.newComment.trim()) {
    ElMessage.warning('请输入评论内容');
    return;
  }
  // 构建请求参数
  const params = {
    content: state.newComment,
    id: "",
    module: "info_news",
    relatedId: '',
    rootId:route.params.id
  };
  const result = await ClientAddComment(params);
  state.newComment = '';
  ElMessage.success(result.msg);
  // 刷新页面
  await getComments()

};

// 提交回复

// 提交回复
const submitReply = async (comment) => {
  if (!state.replyContent.trim()) {
    ElMessage.warning('请输入回复内容');
    return;
  }
  const params = {
    content: state.replyContent,
    module: "activity",
    parentId: comment.id,
    relatedId: "",
    rootId: route.params.id
  };
  comment.showReply = false;
  const result = await ClientReplyComment (params);
  state.replyContent = '';
  ElMessage.success(result.msg);
  // 刷新页面
  await getComments()
};


// 切换回复框显示
const toggleReply = (comment) => {
  comment.showReply = !comment.showReply;
};

</script>

<style scoped>
.news-container {
  min-width: 800px;
  max-width: 1000px; /* 增加容器宽度 */
  margin: 30px auto;
  padding: 40px 50px; /* 增加左右内边距 */
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 调整阴影效果 */
  border-radius: 12px;
}

.news-title {
  font-size: 24px; /* 加大标题字号 */
  color: #1a1a1a;
  text-align: left; /* 左对齐 */
  margin-bottom: 1em;
  line-height: 1.5;
  font-weight: 700; /* 加粗 */
  border-left: 4px solid #409eff; /* 添加左侧装饰线 */
  padding-left: 20px;
}

.meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  font-size: 14px;
  margin: 30px 0;

.time, .views {
  display: flex;
  align-items: center;
  margin-right: 10px;
  gap: 8px;

.el-icon {
  font-size: 18px;
  color: #409eff;
}

&
-text {
  font-weight: 500;
}

}
}

.custom-divider {
  margin: 30px 0;
  border-color: #eee;
}

.content-container {
  line-height: 1.8;
  color: #444;

:deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2em 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加图片阴影 */
  transition: transform 0.3s ease;

&
:hover {
  transform: translateY(-3px);
}

}

:deep(p) {
  margin: 1.5em 0;
  text-align: justify;
}

}

@media (max-width: 768px) {
  /* 添加响应式设计 */
  .news-container {
    padding: 20px;
    margin: 15px;
    width: auto;
  }

  .news-title {
    font-size: 20px;
    padding-left: 15px;
  }

  .meta-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}


.comment-section {
  margin-top: 40px;
  padding: 20px;
  border-top: 1px solid #ebeef5;
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-item {
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-info {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 500;
  color: #333;
}

.time {
  font-size: 12px;
  color: #999;
}

.comment-content {
  margin: 10px 0;
  color: #333;
  line-height: 1.6;
}

.reply-section {
  margin-left: 30px;
  padding-left: 20px;
  border-left: 2px solid #eee;
}

.reply-form {
  margin: 15px 0;
}

.submit-btn {
  margin-top: 10px;
}

.new-comment {
  margin-top: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.reply-list {
  list-style: none;
  padding-left: 20px;
  margin-top: 15px;
}

.reply-item {
  padding: 10px;
  margin: 10px 0;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
}
.new-comment {
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.footer {
  font-size: 14px;
  height: 100px; /* 根据需要调整高度 */
  border-top: 1px solid #e9e9e9;
  display: flex;
  flex-direction: row; /* 水平排列 */
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.beian-footer {
  bottom: 0;
  text-align: center;

a {
  color: #1D1D26;
  font-size: 14px;
  text-decoration-line: underline;

&:hover {
   color: #409EFF;
 }
}
}

</style>
